<template>
	<div style="position: relative;">
		<img style="width: 100%;margin-bottom: 20px;" src="../../static/images/10年高考.png">
		<section style="border:1px solid #54B1FE;border-radius: 10px;margin-left: 5%;margin-right: 5%;">
			<section class="loginBg">
				<section class="login-frame center-mid">
					<mu-text-field v-model="user.username" placeholder="请输入姓名或昵称" class="noborder-input"></mu-text-field>
				</section>
				<section class="login-frame center-mid">
					<mu-text-field v-model="user.phoneNumber" placeholder="请输入联系电话" class="noborder-input"></mu-text-field>
				</section>
				<section class="login-frame center-mid" style="margin-top: 0.6rem;">
					<mu-text-field v-model="user.code" placeholder="请输入短信验证码" class="noborder-input"></mu-text-field>
					<section v-if="verificationStatic==0" style="position: relative;bottom:5px;color: black;font-size: 3.5vw;width: 45%;display: block;border-left: 1px solid rgba(255,255,255,0.56);" @click="getPhoneVerificationCode()">
						获取验证码
					</section>
					<section v-if="verificationStatic==1" style="position: relative;bottom:5px;color: black;font-size: 3.5vw;width: 45%;display: block;border-left: 1px solid rgba(255,255,255,0.56);"> {{verificationTime}}
					</section>
					<section v-if="verificationStatic==2" style="position: relative;bottom:5px;color: black;font-size: 3.5vw;width: 45%;display: block;border-left: 1px solid rgba(255,255,255,0.56);" @click="getPhoneVerificationCode()"> 再次发送
					</section>
				</section>
				<section class="login-frame center-mid">
					<mu-text-field v-model="user.score" placeholder="请输入分数" class="noborder-input"></mu-text-field>
				</section>
				<section class="login-frame center-mid">
					<span style="font-size: 3.5vw;">文理科：</span>
					<div class="RadioStyle">
						<input type="radio" name="fenlei" id="f1" v-model="user.wenlike" value="理科" />
						<label for="f1" style="margin-right: 10px;">理科</label>
						<input type="radio" name="fenlei" id="f2" v-model="user.wenlike" value="文科" />
						<label for="f2">文科</label>
					</div>
				</section>
				<section style="height: 2rem;"></section>
				<mu-button @click="register()" color="primary" style="margin-bottom: 15%;">注册</mu-button>
			</section>
		</section>
		<img style="width: 100%;margin-top: 25px;position: absolute;top: 100%;left: 0px;" src="../../static/images/专家热线.png">
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					username: '',
					phoneNumber: '',
					score: null,
					wenlike: null,
					code: '',
				},

				verificationStatic: 0,
				verificationTime: 60,
			}
		},
		methods: {
			register() {
				console.info('注册')
				let that = this

				that.axios.post('gaokao-api/api/initUser', that.user).then(function(response) {
					if(response.data.code == 100) {
						window.location.href = "http://zte-gao.nat100.top/gaokao-api/wechat/authorize?returnUrl=http://zte-gao.nat100.top/"
					} else {
						alert("注册失败")
					}
				}).catch(function(error) {
					console.log(error)
					alert("注册失败")
				})
			},
			getPhoneVerificationCode() {
				let that = this
				that.axios.post('gaokao-api/api/sendYanZhengMa', {
					"mobile": that.user.phoneNumber
				}).then(function(response) {
					if(response.data.code == 100) {
						that.verificationStatic = 1
					} else {

					}
				}).catch(function(error) {
					console.log(error)
				})
			},
			daojishi() {
				let that = this
				var time = window.setInterval(function() {
					if(that.verificationTime > 0) {
						that.verificationTime -= 1
					} else {
						that.verificationTime = 60
						that.verificationStatic = 2
						window.clearInterval(time)
					}
				}, 1000)
			}
		},

		watch: {
			verificationStatic: {
				handler(newVal) {
					if(newVal == 1)
						this.daojishi()
				}
			},
		}
	}
</script>

<style scoped>
	div {
		font-size: 4vw;
	}
	
	.noborder-input {
		position: relative;
		top: 10px;
		background-color: #F9F9F9;
		width: 100%;
	}
	
	.loginBg {
		height: 100%;
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
	}
	
	.center-mid {
		justify-content: center;
		align-items: center;
	}
	
	.login-frame {
		background-color: rgba(255, 255, 255, 0);
		display: flex;
		flex-direction: row;
		font-size: 1rem;
		padding: 0;
		font-family: "微软雅黑";
		border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	}
	/*.login-strip input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#fff;
	color:#fff
}*/
	
	.login-frame label {
		flex: 1.2;
		color: #9e9e9e;
		text-align: center;
	}
	
	input:-webkit-autofill {
		-webkit-box-shadow: 0 0 0 50px white inset;
		/*border: 1px solid #CCC!important;*/
	}
	
	.login-frame label {
		color: #989898
	}
	
	.login-frame input {
		flex: 6;
		height: 3rem;
		border: none;
		outline: none;
		background-color: rgba(255, 255, 255, 0);
		caret-color: white;
		color: white !important;
		font-size: 0.9rem;
	}
	
	.mu-loginBtn {
		color: white !important;
		border-radius: 50px !important;
		height: 2.6rem !important;
		background-color: #0090ff !important;
		width: 100%;
		margin-top: 2rem !important;
	}
	/*-单选框手机样式*/
	
	.RadioStyle {
		background-color: #F9F9F9;
		width: 80%;
	}
	
	.RadioStyle input {
		display: none;
	}
	
	.RadioStyle label {
		border: 1px solid #00a4ff;
		padding: 2px 10px 2px 5px;
		line-height: 20px;
		min-width: 70px;
		text-align: center;
		float: left;
		margin: 2px;
		border-radius: 4px;
	}
	
	.RadioStyle input:checked+label {
		background: url(../../static/images/ico_checkon.svg) no-repeat right bottom;
		background-size: 21px 21px;
		color: #00a4ff
	}
</style>